import React, { useState, useEffect } from 'react';
import { View, Text } from '@tarojs/components';
import { VirtualScroll } from '../../components/VirtualScroll';
import './index.less';

// 简单的测试数据
interface SimpleItem {
  id: string;
  text: string;
  height: number;
}

export default function SimplePage() {
  const [items, setItems] = useState<SimpleItem[]>([]);

  // 生成简单的测试数据
  const generateItems = (count: number): SimpleItem[] => {
    return Array.from({ length: count }, (_, index) => ({
      id: `simple-${index}`,
      text: `项目 ${index + 1}`,
      height: 60,
    }));
  };

  // 初始化数据
  useEffect(() => {
    setItems(generateItems(20));
  }, []);

  // 获取项目ID
  const getItemId = (item: SimpleItem) => item.id;

  // 计算项目高度
  const calculateHeight = (item: SimpleItem) => item.height;

  // 渲染列表项
  const renderItem = (item: SimpleItem) => (
    <View className="simple-item">
      <Text className="simple-text">{item.text}</Text>
    </View>
  );

  // 处理滚动事件
  const handleScroll = (scrollTop: number) => {
    console.log('滚动位置:', scrollTop);
  };

  // 处理可见项目变化
  const handleVisibleItemsChange = (visibleItems: any[]) => {
    console.log('可见项目数量:', visibleItems.length);
  };

  return (
    <View className="simple-page">
      <View className="simple-header">
        <Text className="simple-title">简单虚拟滚动测试</Text>
      </View>

      <View className="simple-container">
        <VirtualScroll
          items={items}
          height={400}
          estimatedItemHeight={60}
          overscan={3}
          waterfall={false}
          getItemId={getItemId}
          renderItem={renderItem}
          calculateHeight={calculateHeight}
          onScroll={handleScroll}
          onVisibleItemsChange={handleVisibleItemsChange}
          className="simple-virtual-scroll"
        />
      </View>

      <View className="simple-footer">
        <Text className="simple-count">共 {items.length} 个项目</Text>
      </View>
    </View>
  );
}
